<template>
  <div id="home" ref="wrapper">
    <nav-bar class="home-nav">
      <template v-slot:center>
        <div>购物车</div>
      </template>
    </nav-bar>

    <scroll ref="scroll"
            :probe-type="3"
            :pull-up-load="true"
            class="content"
            @pullingUp="loadMore"
            @scroll="contentScroll">
      <banner :banners="banners"/>
      <recommend-view :recommends="recommends"/>
      <feature-view/>
      <tab-control
        :title="['流行', '新款', '精选']"
        @tabClick="tabClick"
      />
      <!--    展示商品-->
      <goods-list :goods-list="goodsList" />
    </scroll>
    <back-top v-show="showBackTop" @click="backTopClick"/>
  </div>
</template>


<script>
import {ref, onActivated, onMounted, onDeactivated} from 'vue'

import NavBar from '@/components/common/navbar/NavBar'
import Banner from '@/components/common/swiper/Banner'
import RecommendView from '@/views/home/homeChild/RecommendView'
import FeatureView from '@/views/home/homeChild/FeatureView'
import TabControl from '@/components/content/tabControl/TabControl'

import { getHomeMultiData, getGoodsListByType } from '@/network/home/home'
import GoodsList from '@/components/content/goods/GoodsList'
import Scroll from '@/components/common/scroll/Scroll'
import BackTop from '@/components/content/backTop/BackTop'
import ToBottom from '@/components/content/backTop/ToBottom'
import MainTabBar from '@/components/content/mainTabbar/MainTabBar'

export default {
  name: 'Home',
  components: {
    MainTabBar,
    ToBottom,
    BackTop,
    Scroll,
    GoodsList,
    TabControl,
    FeatureView,
    RecommendView,
    Banner,
    NavBar
  },
  props: {
    test: {
      test: String,
      default: 'aaa'
    }
  },
  data () {
    return {
      banners: [], // 轮播图
      recommends: [],
      tabOffsetTop: 0,
      goods: {
        'pop': {
          page: 0,
          list: []
        },
        'new': {
          page: 0,
          list: []
        },
        'sell': {
          page: 0,
          list: []
        },
      },
      currentType: 'pop',
      scroll: null,
      showBackTop: false,
      scrollY: 0,
    }
  },
  computed: {
    goodsList () {
      return this.goods[this.currentType].list
    }
  },
  setup(props) {
    const repository = ref([])
      repository.value = props.test;

    onActivated(() => {
      // console.log("onActivated")
    })

    onDeactivated(() => {
      // console.log('onDeactivated')
    })

    return {
      repository
    }
  },
  created () {
    // 获取轮播图 和 推荐
    this.getHomeMultiData()
    // 获取商品信息
    this.getGoodsListByType('pop')
    this.getGoodsListByType('new')
    this.getGoodsListByType('sell')
  },
  mounted () {
    this.$refs.scroll.refresh()
  },
  activated () {
    this.$refs.scroll.scrollTo(0,this.scrollY)
    this.$refs.scroll.refresh()
  },
  deactivated () {
    this.scrollY = this.$refs.scroll.getScrollY();
  },
  methods: {


    // 网络请求
    getHomeMultiData () {
      getHomeMultiData().then(resp => {
        // 请求成功
        if (resp.success) {
          this.banners = resp.data.banner.list
          this.recommends = resp.data.recommend.list
        } else {
          alert('网络数据请求失败')
        }
      })
    },
    getGoodsListByType (type) {
      const pageSize = this.goods[type].page + 1
      getGoodsListByType(type, pageSize).then(res => {
        if (res.success) {
          this.goods[type].list.push(...res.data.list)
          this.goods[type].page = pageSize
        }
      })
    },
    loadMore () {
      console.log(this.currentType)
      this.getGoodsListByType(this.currentType)
      this.$refs.scroll.finishPullUp()
    },


    // 点击事件
    contentScroll (position) {
      this.showBackTop = (-position.y) > 1000
    },
    backTopClick (event) {
      console.log(event)

      this.$refs.scroll.scrollTo(0, 0, 300)
    },
    tabClick (idx) {
      switch (idx) {
        case 0: {
          this.currentType = 'pop'
          break
        }
        case 1: {
          this.currentType = 'new'
          break
        }
        case 2: {
          this.currentType = 'sell'
          break
        }
      }
    },
    swiperImageLoad () {
      // this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
    },
    testClick() {
      alert("aaa")
    }
  }
}
</script>

<style scoped>
.content {
  position: absolute;
  overflow: hidden;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}

.home-nav {
  background-color: var(--color-tint);
  color: white;
  z-index: 9;
}

#home {
  position: relative;
  height: 100vh;
}
</style>
